<script setup lang="ts">
import { ref } from 'vue'
import {
  Plus,
  Delete,
  ZoomIn,
  ZoomOut,
  FullScreen,
  Upload,
  Download,
  Document,
} from '@element-plus/icons-vue'
import MermaidImportDialog from './MermaidImportDialog.vue'
import { ElMessage } from 'element-plus'

const props = defineProps<{
  selectedNode: boolean  // 添加selectedNode属性定义
}>()

const emit = defineEmits<{
  (e: 'add'): void
  (e: 'delete'): void
  (e: 'zoom-in'): void
  (e: 'zoom-out'): void
  (e: 'zoom-fit'): void
  (e: 'import', data: any): void
  (e: 'export'): void
  (e: 'export-markdown'): void
}>()

const fileInput = ref<HTMLInputElement | null>(null)
const showMermaidDialog = ref(false)

const handleMermaidDialogOpen = () => {
  showMermaidDialog.value = true
}

const handleMermaidImport = (data: any) => {
  emit('import', data)
  ElMessage.success('导入成功')
}

const handleImport = () => {
  fileInput.value?.click()
}

const handleExport = () => {
  emit('export')
}

const onFileSelected = (event: Event) => {
  const input = event.target as HTMLInputElement
  if (input.files && input.files[0]) {
    const file = input.files[0]
    const reader = new FileReader()
    reader.onload = (e) => {
      try {
        const data = JSON.parse(e.target?.result as string)
        emit('import', data)
        ElMessage.success('导入成功')
      } catch (error) {
        ElMessage.error('导入失败：无效的文件格式')
      }
      // 清除文件选择，以便可以重复选择同一个文件
      input.value = ''
    }
    reader.onerror = () => {
      ElMessage.error('导入失败：文件读取错误')
      input.value = ''
    }
    reader.readAsText(file)
  }
}
</script>

<template>
  <div class="mindmap-toolbar">
    <MermaidImportDialog
      v-model="showMermaidDialog"
      @confirm="handleMermaidImport"
    />
    <el-button-group>
      <el-tooltip content="添加子节点 (Tab)" placement="bottom">
        <el-button :disabled="!props.selectedNode" @click="emit('add')">
          <el-icon><Plus /></el-icon>
        </el-button>
      </el-tooltip>
      <el-tooltip content="删除节点 (Delete)" placement="bottom">
        <el-button :disabled="!props.selectedNode" @click="emit('delete')">
          <el-icon><Delete /></el-icon>
        </el-button>
      </el-tooltip>
    </el-button-group>

    <el-divider direction="vertical" />

    <el-button-group>
      <el-tooltip content="放大" placement="bottom">
        <el-button @click="emit('zoom-in')">
          <el-icon><ZoomIn /></el-icon>
        </el-button>
      </el-tooltip>
      <el-tooltip content="缩小" placement="bottom">
        <el-button @click="emit('zoom-out')">
          <el-icon><ZoomOut /></el-icon>
        </el-button>
      </el-tooltip>
      <el-tooltip content="适应画布" placement="bottom">
        <el-button @click="emit('zoom-fit')">
          <el-icon><FullScreen /></el-icon>
        </el-button>
      </el-tooltip>
    </el-button-group>

    <el-divider direction="vertical" />

    <el-button-group>
      <el-tooltip content="导入 JSON" placement="bottom">
        <el-button @click="handleImport">
          <el-icon><Upload /></el-icon>
        </el-button>
      </el-tooltip>
      <el-tooltip content="导入 Mermaid" placement="bottom">
        <el-button @click="handleMermaidDialogOpen">
          <el-icon><Document /></el-icon>
        </el-button>
      </el-tooltip>
      <el-tooltip content="导出 JSON" placement="bottom">
        <el-button @click="handleExport">
          <el-icon><Download /></el-icon>
        </el-button>
      </el-tooltip>
      <el-tooltip content="导出 Markdown" placement="bottom">
        <el-button @click="emit('export-markdown')">
          <el-icon><Document /></el-icon>
        </el-button>
      </el-tooltip>
    </el-button-group>

    <input
      ref="fileInput"
      type="file"
      accept=".json"
      style="display: none"
      @change="onFileSelected"
    />
  </div>
</template>

<style scoped>
.mindmap-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  background-color: transparent;
  padding: 0;
}

.el-button-group {
  display: flex;
}

:deep(.el-button) {
  height: 32px;
  padding: 0 8px;
  border-color: #e2e8f0;
  background-color: white;
  color: #334155;
}

:deep(.el-button:hover) {
  background-color: #f1f5f9;
  border-color: #cbd5e1;
  color: #1e293b;
}

:deep(.el-button:active) {
  background-color: #e2e8f0;
  transform: translateY(1px);
}

:deep(.el-button.is-disabled) {
  background-color: #f8fafc;
  border-color: #e2e8f0;
  color: #94a3b8;
}

:deep(.el-button + .el-button) {
  margin-left: -1px;
}

:deep(.el-icon) {
  font-size: 16px;
}

:deep(.el-divider--vertical) {
  height: 16px;
  margin: 0 4px;
  border-color: #e2e8f0;
}

:deep(.el-tooltip__trigger) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
</style>